

import { count, log } from "console";
import React, { Component } from "react";
import type { ReactNode } from 'react'

export default class App extends Component {

    state = {
         msg: '他在家从来不收拾房间'
    }
    render() {

        return <>
          <div>
            <h1>父组件 - {this.state.msg}</h1>
            {/* 
                    2. 表单
                    3. 生命周期
                    4. axios
            */}

            {/* 虽然内容可以显示，但是有一个报错 */}
            {/* 当前的输入框是一个只读的，不可以做任何修改，如果需要一个可以修改的输入框
                1. 将 value 改为 defaultValue
                2. 添加一个 onChange 事件
            */}

            {/* 该输入框无法输入任何内容，而且有报错 */}
            {/* <input type="text" value={this.state.msg} /> */}


            {/* 带有默认值的输入框，非受控输入框 */}
            {/* <input type="text" style={{ width: '300px' }} defaultValue={this.state.msg} /> */}

            {/* 受控表单 */}

            <input type="text" style={{ width: '300px' }} value={this.state.msg} onChange={(e)=>{
                this.setState({
                    msg: e.target.value
                })

                {/* 
                    在 React 中表单可以分为两种
                    1. 受控表单，带 value 和 onChange 的是受控
                    2. 非受控的，不带的
                */}
            }} />
          </div>
        </>
    }

}